<template>
  <div class="login">
    <div class="window">
      <div>
        <el-form v-model="form">
          <el-row>
            <el-col :sapn="24">
              <el-form-item label="账号">
                <el-input v-model="form.username" @keyup.enter.native="login" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sapn="24">
              <el-form-item label="密码">
                <el-input v-model="form.password" type="password" @keyup.enter.native="login"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button type="submit" @click="login">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form:{
        title: "中文表头",
        username: 'admin',
        password: 'admin123',
      }
    };
  },
  methods: {
    /* 登录 */
    login(){
      /*
       * 在账号input和密码input都加入了本地 键盘enter键抬起事件 input框
       */
      if(this.form.password == null || this.form.password == undefined){
        this.$message.error("请输入密码");
      }
      let params = {
        username: this.form.username,
        password: this.form.password
      }
      /* 非登陆 */
      this.$router.push({ name: "Home" ,params: {username: this.form.username}})

      this.$http.post('/web/login',params).then( response => {
        if(response == null){
          this.$router.push({ name: "Home" ,params: {username: this.form.username}})
        }
        if(response.code == 200){
          this.$router.push({ name: "Home" ,params: {username: this.form.username}})
        }else{
          this.$message.error("您的账号密码错误,请重新输入")
        }
        // path 跳转
        // this.$router.push({ path: "/home" ,query: {username: this.form.username}})
        // name 跳转

      })
    },
  }
};
</script>


<style>
/* 水平垂直居中 */
.login{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  /*background-size: cover;*/
  background: url("../static/image/4.png") no-repeat;
  background-size: 100%;
}
.window{
  /* 水平垂直居中 */
  /*margin: 0 auto;*/
  /*position: absolute;*/
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(-50%,-50%);*/
  /*border: 1px solid;*/
}
</style>